import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  TextInput,
  Text,
  ScrollView,
  TouchableOpacity,
} from 'react-native'

import NavBar from '../../../components/PublicHeader';
import getStorageValue from '../../../utils/getStorageValue';
import fetchWebApi from '../../../public/WebApi/fetchBase';
import {
  Images
} from '../../../public/images/images';
import {
  Constant
} from '../../../public/js/constant';
import {
  POST_USER_SEARCH
} from '../../../public/WebApi/mailListApi';
export default class addfriends extends Component {
  constructor(props) {
    super(props)
    this.state = {
      userList: [],
      flag: false
    };
  }

  componentDidMount = () => { }

  // 搜索用户
  async PostSearch(values) {
    const res = await fetchWebApi(POST_USER_SEARCH,
      {
        token: await getStorageValue(Constant.TOKEN),
        phone: values
      }, 'POST')
    if (res.status == 200) {
      // 电话号码超过11位数
      if (values.length == 11) {
        if (res.data != null) {
          this.setState({
            userList: res.data[0],
            flag: true
          })
        }
      }
    }
  }

  // 判断诚信等级
  reputations(item) {
    return (
      parseInt(item) == 1 ?
        <>
          <Text style={{ color: '#FDE400' }}>★</Text>
          <Text style={{ color: '#C4C4C4' }}>★</Text>
          <Text style={{ color: '#C4C4C4' }}>★</Text>
          <Text style={{ color: '#C4C4C4' }}>★</Text>
          <Text style={{ color: '#C4C4C4' }}>★</Text>
        </> : parseInt(item) == 2 ?
          <>
            <Text style={{ color: '#FDE400' }}>★</Text>
            <Text style={{ color: '#FDE400' }}>★</Text>
            <Text style={{ color: '#C4C4C4' }}>★</Text>
            <Text style={{ color: '#C4C4C4' }}>★</Text>
            <Text style={{ color: '#C4C4C4' }}>★</Text>
          </> : parseInt(item) == 3 ?
            <>
              <Text style={{ color: '#FDE400' }}>★</Text>
              <Text style={{ color: '#FDE400' }}>★</Text>
              <Text style={{ color: '#FDE400' }}>★</Text>
              <Text style={{ color: '#C4C4C4' }}>★</Text>
              <Text style={{ color: '#C4C4C4' }}>★</Text>
            </> : parseInt(item) == 4 ?
              <>
                <Text style={{ color: '#FDE400' }}>★</Text>
                <Text style={{ color: '#FDE400' }}>★</Text>
                <Text style={{ color: '#FDE400' }}>★</Text>
                <Text style={{ color: '#FDE400' }}>★</Text>
                <Text style={{ color: '#C4C4C4' }}>★</Text>
              </> : parseInt(item) == 5 ?
                <>
                  <Text style={{ color: '#FDE400' }}>★</Text>
                  <Text style={{ color: '#FDE400' }}>★</Text>
                  <Text style={{ color: '#FDE400' }}>★</Text>
                  <Text style={{ color: '#FDE400' }}>★</Text>
                  <Text style={{ color: '#FDE400' }}>★</Text>
                </> : parseInt(item) == 0 ?
                  <>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                  </> : null
    )
  }

  render() {
    let userlist =
      <>
        <TouchableOpacity onPress={() => {
          this.props.navigation.navigate('introduces', {
            params: this.state.userList.flag,
            id: this.state.userList.id,
            remarksName: this.state.userList.remark != null ?
              this.state.userList.remark : this.state.userList.nickName,
            refresh: () => {
            },
          });
        }} style={styles.body_list_search}>
          <View style={styles.list_view}>
            <View>

            </View>
            <View style={styles.list_view2}>
              <Text style={styles.list_text_search}>
                {this.state.userList.nickName}
              </Text>
              <Text style={styles.list_text_search2}>座右铭：
                {this.state.userList.motto == '' ?
                  '用户很懒，暂未添加座右铭' : this.state.userList.motto == null ?
                    '用户很懒，暂未添加座右铭' : this.state.userList.motto}
              </Text>
            </View>
          </View>
          <View style={styles.evaluatess}>
            {this.reputations(this.state.userList.creditLevel)}
          </View>
        </TouchableOpacity>
      </>

    let body = this.state.flag ?
      <>
        <View style={styles.list}>
          {userlist}
        </View>
      </> :
      <>
        {/* 我的二维码 */}
        <TouchableOpacity onPress={() => {
          this.props.navigation.navigate('qrcode', { data: true })
        }} style={styles.qrCode}>
          <View style={styles.qrCode_view}>
            <Image source={Images.qrcode} />
            <View style={styles.view_texts}>
              <Text style={styles.texts_text}>我的二维码</Text>
              <Text style={styles.texts_text2}>扫一扫添加好友</Text>
            </View>
          </View>
          <View>
            <Image style={styles.view2_img} source={Images.Vector} />
          </View>
        </TouchableOpacity>
        {/* 扫一扫 */}
        <TouchableOpacity onPress={() => {
          this.props.navigation.navigate('scanAndAddFriends')
        }} style={styles.qrCode}>
          <View style={styles.qrCode_view}>
            <Image source={Images.scan} />
            <View style={styles.view_texts}>
              <Text style={styles.texts_text}>扫一扫</Text>
              <Text style={styles.texts_text2}>扫描二维码添加好友</Text>
            </View>
          </View>
          <View>
            <Image style={styles.view2_img} source={Images.Vector} />
          </View>
        </TouchableOpacity>
      </>

    return (
      <View style={{ flex: 1 }}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={'添加好友'}
          titleColor={"#333"}
        />
        <ScrollView>
          {/* 输入手机号/账号 */}
          <View style={styles.search}>
            <TextInput
              onChange={(value) => {
                const values = value.nativeEvent.text
                if (values.length == 11) {
                  this.PostSearch(values)
                } else {
                  this.setState({
                    userList: [],
                    flag: false
                  })
                }
              }}
              style={styles.search_input}
              inlineImageLeft='sou'
              placeholder='请输入用户手机号'
              inlineImagePadding={40}
              keyboardType={'numeric'} />
          </View>
          {body}
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  search: {
    backgroundColor: '#fff',
    marginTop: 10,
    height: 50
  },
  search_input: {
    paddingLeft: 15
  },
  qrCode: {
    backgroundColor: '#fff',
    marginTop: 20,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15
  },
  qrCode_view: {
    display: 'flex',
    flexDirection: 'row',
  },
  texts_text: {
    fontSize: 18
  },
  texts_text2: {
    color: '#A6A6A6'
  },
  view_texts: {
    display: 'flex',
    marginLeft: 20
  },
  view2_img: {
    marginTop: 10
  },
  list: {
    padding: 15
  },
  body_list_search: {
    display: 'flex',
    flexDirection: 'row',
    paddingLeft: 5,
    padding: 15,
    justifyContent: 'space-between',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc'
  },
  list_view: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start'
  },
  list_view2: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    paddingLeft: 10
  },
  list_text_search: {
    color: '#333',
    fontSize: 18,
  },
  list_text_search2: {
    color: '#999',
    fontSize: 14,
  },
  evaluatess: {
    display: 'flex',
    flexDirection: 'row',
  },
})